<template>
  <div class="w-card content-box">
    <div class="title-box">
      <span>代理商详情</span>
      <!-- <el-button type="danger" v-show="infoForm.operationalStatus != 2" style="margin-left:auto;"
        @click="handleClick(1)">冻结商户邀请码</el-button>
      <el-button type="primary" v-show="infoForm.operationalStatus == 2" style="margin-left:auto;"
        @click="handleClick(2)">解冻商户邀请码</el-button>
      <el-button type="warning" v-show="infoForm.operationalStatus != 0" @click="handleClick(3)">拉黑</el-button>
      <el-button type="primary" v-show="infoForm.operationalStatus == 0" @click="handleClick(4)">解除拉黑</el-button> -->
      <el-button type="primary" plain @click="openDialog('店铺迁移')" style="margin-left:auto;">店铺迁移</el-button>
    </div>
    <div class="f-title">
      <span>代理商基本信息</span>
    </div>
    <div class="jb-info">
      <div>
        <div>代理商名称：
          <span>{{ infoForm.shopName }}
            <a class="f-a" @click="openDialog('修改代理商名称')">修改</a>
          </span>
        </div>
        <div>邀请码：
          <span>{{ infoForm.shopCode }}
            <a class="f-a" @click="openDialog('修改邀请码')">修改</a>
          </span>
        </div>
        <!-- <div>邀请码状态：
            <span>{{ infoForm.codeStatus == 0 ? '冻结' : infoForm.codeStatus == 1 ? '正常' : '' }}</span>
          </div> -->
        <div>商户类型：
          <span>{{ infoForm.auditStatus == 1 ? '个人' : infoForm.auditStatus == 2 ? '公司' : '' }}</span>
        </div>
        <div>商户状态：
          <span>{{ infoForm.operationalStatus == 0 ? '拉黑' : infoForm.operationalStatus == 1 ? '正常' : infoForm.operationalStatus == 2 ? '邀请码冻结' : '' }}</span>
        </div>
        <div>联系方式：
          <span>{{ infoForm.contactsName }}</span>
          <span>({{ infoForm.contactsPhone || '暂无联系电话' }})</span>
        </div>
        <div>实名状态：
          <span>{{ infoForm.certificationStatus == 0 ? '未实名' : infoForm.certificationStatus == 1 ? '已实名' : '' }}</span>
        </div>
        <div>创建时间：
          <span>{{ infoForm.createTime ? getDateTime(infoForm.createTime)[6] : '' }}</span>
        </div>
        <div>上级代理商：
          <span>{{ infoForm.supplierShopName }}</span>
        </div>
        <div>分销层级：
          <span>{{ infoForm.level }}</span>
        </div>
      </div>
      <div v-show="infoForm.idcardUrl">
        <img :src="infoForm.idcardUrl" alt="">
        <div>实名照片</div>
      </div>
    </div>
    <el-collapse accordion v-model="activeColl">
      <el-collapse-item name="1">
        <template #title>
          <div class="f-title" style="border: none;">
            <span>佣金/积分累计发放</span>
          </div>
        </template>
        <div class="jine-box">
          <div>
            <div class="jine-o">
              <span>累计入账佣金(元)：</span>
              <span style="font-size: 20px;color: #000000;">{{ numFormat(yongjinForm.incomeUnfreezenTotal) }}</span>
            </div>
            <div class="jine-th">
              <div>
                <span>可提现佣金(元)</span>
                <span style="font-size: 16px;color: #000000;">{{ numFormat(yongjinForm.incomerest) }}</span>
              </div>
              <div>
                <span>已提现佣金(元)</span>
                <span style="font-size: 16px;color: #000000;">{{ numFormat(yongjinForm.incomewithdraw) }}</span>
              </div>
              <!-- <div>
                  <span>月结佣金(元)</span>
                  <span style="font-size: 16px;color: #000000;">{{ numFormat(yongjinForm.incomeUnfreezenTotalTeam || '') }}</span>
                </div> -->
            </div>
          </div>
          <div>
            <div class="jine-o">
              <span>累计获取积分：</span>
              <span style="font-size: 20px;color: #FF7D75;">{{ numFormat(yongjinForm.gaveTotalJifen ) }}</span>
            </div>
            <div class="jine-th">
              <div>
                <span>剩余积分</span>
                <span class="g-flex-ct" style="font-size: 16px;color: #000000;">
                  {{ numFormat(yongjinForm.leftFeeJifen ) }}
                  <a class="f-a" @click="openJifenDialog()">详情</a>
                </span>
              </div>
              <div>
                <span>累计使用积分</span>
                <span style="font-size: 16px;color: #000000;">{{ numFormat(yongjinForm.usedTotalJifen ) }}</span>
              </div>
              <div>
                <span>兑换中冻结积分</span>
                <span style="font-size: 16px;color: #000000;">{{ numFormat(yongjinForm.freezenJifen ) }}</span>
              </div>
            </div>
          </div>
          <!-- <div class="jine-t">
            <div>
              <span>可提现佣金(元)：</span>
              <span style="font-size: 20px;color: #FFA811;">{{ numFormat(yongjinForm.incomerest || '') }}</span>
            </div>
            <el-divider border-style="dashed" style="border-top-color: #cccccc;margin: 0;" />
            <div>
              <span>已提现佣金(元)：</span>
              <span style="font-size: 20px;color: #0081FF;">{{ numFormat(yongjinForm.incomewithdraw || '') }}</span>
            </div>
          </div> -->
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="f-title">
      <span>下级代理商列表({{ total }})</span>
    </div>
    <div class="table-box">
      <el-table :max-height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
        :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="tableData" stripe>
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column prop="shopName" label="商户名称" align="center">
          <template v-slot="scope">
            <el-link style="font-size:12px" type="primary"
              @click="lookDetail(scope.row.shopId)">{{ scope.row.shopName || '' }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="shopCode" label="商户邀请码" align="center">
          <template v-slot="scope">
            {{ scope.row.shopCode || '' }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="codeStatus" label="邀请码状态" align="center">
            <template v-slot="scope">
              {{ scope.row.codeStatus == 0 ? '冻结' : scope.row.codeStatus == 1 ? '正常' : '' }}
            </template>
          </el-table-column> -->
        <el-table-column prop="auditStatus" label="商户类型" align="center">
          <template v-slot="scope">
            {{ scope.row.auditStatus == 1 ? '个人' : scope.row.auditStatus == 2 ? '公司' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="certificationStatus" label="实名状态" align="center">
          <template v-slot="scope">
            {{ scope.row.certificationStatus == 0 ? '未实名' : scope.row.certificationStatus == 1 ? '已实名' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="180">
          <template v-slot="scope">
            {{ scope.row.createTime ? getDateTime(scope.row.createTime)[6] : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="supplierShopName" label="联系方式" align="center" width="200">
          <template v-slot="scope">
            <span>{{ scope.row.contactsName }}</span>
            <span>({{ scope.row.contactsPhone || '暂无联系电话' }})</span>
          </template>
        </el-table-column>
        <el-table-column prop="contacts" label="商户状态" align="center">
          <template v-slot="scope">
            {{ scope.row.operationalStatus == 0 ? '拉黑' : scope.row.operationalStatus == 1 ? '正常' : scope.row.operationalStatus == 2 ? '邀请码冻结' : '' }}
          </template>
        </el-table-column>
      </el-table>
      <div class="my-table-footer">
        <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
          :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <div class="f-title">
      <span>上级代理商列表</span>
    </div>
    <div class="table-box">
      <el-table :max-height="450" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
        :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="shopParentsTable" stripe>
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column prop="shopName" label="商户名称" align="center">
          <template v-slot="scope">
            <el-link style="font-size:12px" type="primary"
              @click="lookDetail(scope.row.shopId)">{{ scope.row.shopName || '' }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="shopCode" label="商户邀请码" align="center">
          <template v-slot="scope">
            {{ scope.row.shopCode || '' }}
          </template>
        </el-table-column>
        <el-table-column prop="auditStatus" label="商户类型" align="center">
          <template v-slot="scope">
            {{ scope.row.auditStatus == 1 ? '个人' : scope.row.auditStatus == 2 ? '公司' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="level" label="分销层级" align="center">
          <template v-slot="scope">
            {{ scope.row.level }}
          </template>
        </el-table-column>
        <el-table-column prop="certificationStatus" label="实名状态" align="center">
          <template v-slot="scope">
            {{ scope.row.certificationStatus == 0 ? '未实名' : scope.row.certificationStatus == 1 ? '已实名' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="180">
          <template v-slot="scope">
            {{ scope.row.createTime ? getDateTime(scope.row.createTime)[6] : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="supplierShopName" label="联系方式" align="center" width="200">
          <template v-slot="scope">
            <span>{{ scope.row.contactsName }}</span>
            <span>({{ scope.row.contactsPhone || '暂无联系电话' }})</span>
          </template>
        </el-table-column>
        <el-table-column prop="contacts" label="商户状态" align="center">
          <template v-slot="scope">
            {{ scope.row.operationalStatus == 0 ? '拉黑' : scope.row.operationalStatus == 1 ? '正常' : scope.row.operationalStatus == 2 ? '邀请码冻结' : '' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <confirm-pass-vue ref="confirmPassVueRef" @verification="verification" />

  <el-dialog v-model="dialogVisible" :title="dialogForm.title" width="400">
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogRules">
      <el-form-item v-if="dialogForm.title == '修改代理商名称'" prop="shopName" label="新的代理商名称">
        <el-input v-model="dialogForm.shopName" clearable placeholder="请输入新的代理商名称" />
      </el-form-item>
      <el-form-item v-if="dialogForm.title == '修改邀请码'" prop="shopCode" label="新的邀请码">
        <el-input v-model="dialogForm.shopCode" clearable placeholder="请输入新的邀请码" @input="checkShopCode" />
      </el-form-item>
      <p v-if="dialogForm.title == '修改邀请码'" style="font-size: 12px;color:red">*邀请码规则：请输入6-12位，由数字和大小写字母组成！</p>

      <el-form-item v-if="dialogForm.title == '店铺迁移'" prop="toShop" label="选择目标店铺">
        <el-select v-model="dialogForm.toShop" filterable clearable>
          <el-option v-for="(item,index) in shopList" :key="index" :label="item.shopName" :value="item.shopId" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogCancel()">取消</el-button>
        <el-button type="primary" @click="dialogSave()">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="jifenDialogOut" title="积分记录" width="1000">
    <div class="table-box">
      <el-button plain type="primary" style="margin-bottom: 10px;" @click="openDialog('新增积分记录',1)">新增积分记录</el-button>
      <el-table :max-height="450" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
        :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="jifenTable" stripe>
        <el-table-column prop="id" label="id" align="center">
          <template v-slot="scope">
            {{ scope.row.id || '' }}
          </template>
        </el-table-column>
        <el-table-column prop="fee" label="积分" align="center">
          <template v-slot="scope">
            {{ scope.row.fee  }}
          </template>
        </el-table-column>
        <el-table-column prop="inOut" label="积分操作" align="center">
          <template v-slot="scope">
            {{ scope.row.inOut == 1 ? '入账' : scope.row.inOut == 2 ? '支出' : '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="recordType" label="记录类别" align="center">
          <template v-slot="scope">
            {{ recordType[scope.row.recordType] }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center">
          <template v-slot="scope">
            {{ scope.row.remarks || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template v-slot="scope">
            {{ scope.row.createTime ? getDateTime(scope.row.createTime)[6] : '' }}
          </template>
        </el-table-column>
      </el-table>
      <div class="my-table-footer">
        <el-pagination style="margin-left:auto;" v-model:currentPage="jifenPage" v-model:page-size="jifenSize"
          :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, prev, pager, next, jumper" :total="jifenTotal"
          @current-change="openJifenDialog" />
      </div>
    </div>

    <el-dialog v-model="jifenDialogIn" width="500" :title="dialogForm.title" append-to-body>
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogRules">
        <el-form-item prop="inOut" label="积分操作">
          <el-select v-model="dialogForm.inOut" clearable>
            <el-option label="增加" value="1" />
            <el-option label="扣减" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item prop="fee" label="积分">
          <el-input v-model="dialogForm.fee" clearable placeholder="请输入积分" type="number" />
        </el-form-item>
        <el-form-item prop="remarks" label="备注:">
          <el-input v-model="dialogForm.remarks" :rows="3" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogCancel(1)">取消</el-button>
          <el-button type="primary" @click="dialogSave(1)">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>
</template>
  
  <script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, numFormat } from '@/utils/utils'
import { useRoute, useRouter } from 'vue-router'
import api from './api'
import confirmPassVue from '@/components/confirmPass.vue'
export default {
  components: {
    confirmPassVue,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()

    const confirmPassVueRef = ref(null)
    const dialogFormRef = ref(null)

    const state = reactive({
      activeColl: '1',
      shopId: null,
      page: 1,
      size: 10,
      total: 0,
      handleType: null,
      tableData: [],
      tableHeight: 0,
      infoForm: {},
      yongjinForm: {},

      dialogVisible: false,
      dialogForm: {},
      dialogRules: {
        shopName: [
          { required: true, message: "请输入代理商名称", trigger: "blur" },
        ],
        shopCode: [
          { required: true, message: "请输入邀请码", trigger: "blur" },
        ],
        toShop: [
          { required: true, message: "请选择目标店铺", trigger: "change" },
        ],
        inOut: [
          { required: true, message: "请选择积分操作", trigger: "change" },
        ],
        fee: [
          { required: true, message: "请输入积分", trigger: "blur" },
        ],
      },

      shopParentsTotal: 0,
      shopParentsTable: [],

      shopList: [],

      jifenDialogOut: false,
      jifenDialogIn: false,
      jifenTable: [],
      jifenPage: 1,
      jifenSize: 10,
      jifenTotal: 0,
      recordType: {
        '3': '设备激活',
        '4': '积分兑换',
        '5': '积分购买',
        '6': '积分赠送',
        '7': '平台调控',
      }
    })

    function getInfoForm() {
      const obj = {
        shopId: state.shopId,
      }
      api.shopDetail(obj).then(res => {
        if (res.code == '200') {
          state.infoForm = res.data
          getYongjin()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getTableData() {
      const obj = {
        shopId: state.shopId,
        page: state.page,
        size: state.size,
      }
      api.shopSearchConsumer(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.records
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    function handleClick(type) {
      state.handleType = type
      let title = ''
      let msg = ''
      switch (type) {
        case 1:
          //邀请码冻结
          title = '是否冻结该商户的邀请码？'
          msg = '商户邀请码冻结后，将不能发展下游代理商'
          break
        case 2:
          //邀请码解冻
          title = '是否解除冻结该商户的邀请码？'
          msg = '商户邀请码解除冻结后，可以继续发展下游代理商'
          break
        case 3:
          //拉黑
          title = '是否拉黑该商户？'
          msg = '商户拉黑后，将无法登录使用精灵伙伴App'
          break
        case 4:
          //解除拉黑
          title = '是否解除拉黑该商户？'
          msg = '商户解除拉黑后，可以正常登录使用精灵伙伴App'
          break
      }
      confirmPassVueRef.value.dialogShow(title, msg, false)
    }

    function verification() {
      switch (state.handleType) {
        case 1:
          dongAjieHandle([state.infoForm.shopId], 2)
          break
        case 2:
          dongAjieHandle([state.infoForm.shopId], 1)
          break
        case 3:
          heiAjieHandle([state.infoForm.shopId], 0)
          break
        case 4:
          heiAjieHandle([state.infoForm.shopId], 1)
          break
      }
    }

    function dongAjieHandle(shopIds, operationalStatus) {
      const obj = {
        shopIds,
        operationalStatus,
      }
      api.shopStateBatchUpdate(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getInfoForm()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function heiAjieHandle(shopIds, operationalStatus) {
      const obj = {
        shopIds,
        operationalStatus,
      }
      api.shopStateBatchUpdate(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getInfoForm()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function lookDetail(shopId) {
      if (!shopId) return
      state.shopId = shopId
      getInfoForm()
      getTableData()
      getShopSearchParents()
    }

    function getYongjin() {
      const obj = {
        qryShopId: state.shopId
      }
      api.incomeShop(obj).then(res => {
        if (res.code == '200') {
          state.yongjinForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    const openDialog = (title, type) => {
      state.dialogForm.title = title

      if (type == 1) {
        state.jifenDialogIn = true
      } else {
        state.dialogVisible = true
      }
    }

    const dialogCancel = (type) => {
      if (type == 1) {
        state.jifenDialogIn = false
      } else {
        state.dialogVisible = false
      }
      state.dialogForm = {}
      dialogFormRef.value.resetFields()
    }

    const dialogSave = () => {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          if (state.dialogForm.title == '修改代理商名称') {
            let json = JSON.parse(JSON.stringify(state.dialogForm))
            json.toShopId = state.shopId
            api.shopnameModify(json).then(res => {
              successDeal('操作成功！')
              getInfoForm()
              dialogCancel()
            })
          } else if (state.dialogForm.title == '修改邀请码') {
            let json = JSON.parse(JSON.stringify(state.dialogForm))
            json.toShopId = state.shopId
            api.shopcodeModify(json).then(res => {
              successDeal('操作成功！')
              getInfoForm()
              dialogCancel()
            })
          } else if (state.dialogForm.title == '店铺迁移') {
            let json = JSON.parse(JSON.stringify(state.dialogForm))
            json.fromShop = state.shopId
            api.shopMove(json).then(res => {
              successDeal('操作成功！')
              getInfoForm()
              dialogCancel()
            })
          } else if (state.dialogForm.title == '新增积分记录') {
            let json = JSON.parse(JSON.stringify(state.dialogForm))
            json.objShopId = state.shopId
            api.jifenRecordAdd(json).then(res => {
              successDeal('操作成功！')
              openJifenDialog(1)
              getInfoForm()
              dialogCancel(1)
            })
          }
        }
      })
    }

    const checkShopCode = (e) => {
      state.dialogForm.shopCode = e.replace(/[^\w\.\/]/ig, '')
    }

    const getShopSearchParents = () => {
      let json = {
        shopId: state.shopId,
      }
      api.shopSearchParents(json).then(res => {
        state.shopParentsTable = res.data?.list
      })
    }

    const getShopChooseList = () => {
      api.shopChooseList().then(res => {
        state.shopList = res.data.list
      })
    }

    const openJifenDialog = (page) => {
      if (page) {
        state.jifenPage = page
      } else {
        state.jifenPage = 1
      }
      let json = {
        "createTimeMax": "",
        "createTimeMin": "",
        "inOut": "",
        "objShopId": state.shopId,
        "orderBy": "",
        "page": state.jifenPage,
        "recordType": "",
        "size": state.jifenSize
      }
      api.jifenRecordList(json).then(res => {
        state.jifenTable = res.data.list
        state.jifenTotal = res.data.total
        state.jifenDialogOut = true
      })
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 220
      state.shopId = route.query.shopId || null
      if (!state.shopId) return
      getInfoForm()
      getTableData()
      getShopSearchParents()
      getShopChooseList()
    })

    return {
      ...toRefs(state),
      confirmPassVueRef,
      dialogFormRef,
      getDateTime,
      handleCurrentChange,
      handleSizeChange,
      handleClick,
      verification,
      lookDetail,
      numFormat,
      dialogCancel,
      dialogSave,
      openDialog,
      checkShopCode,
      openJifenDialog
    }
  }
}
  </script>
  
  <style lang="scss" scoped>
.content-box {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.title-box {
  display: flex;
  align-items: center;
  > span {
    font-size: 16px;
    font-weight: bold;
  }
}
.f-title {
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #e9e9e9;
  > span {
    font-size: 14px;
    font-weight: bold;
  }
}
.jb-info {
  display: flex;
  align-items: center;
  > div:first-of-type {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 10px 20px;
    > div {
      width: 33%;
      font-size: 14px;
      margin-bottom: 20px;
      > span {
        color: #5a5a5a;
      }
    }
  }
  > div:last-of-type {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 10px;
    width: 200px;
    display: flex;
    flex-flow: column;
    align-items: center;
    > img {
      width: 100%;
      max-height: 150px;
    }
    > div {
      font-size: 12px;
      color: #b3b3b3;
    }
  }
}
.table-box {
  margin-top: 10px;
  .my-table-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
}
.jine-box {
  display: flex;
  gap: 20px;
  box-sizing: border-box;
  padding: 0 20px;
  > div {
    flex-grow: 1;
    background-color: rgba($color: #0081ff, $alpha: 0.1);
    box-sizing: border-box;
    padding: 20px;
  }
}
.jine-o {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #727780;
}

.jine-t {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #727780;
  }
}

.jine-th {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  > div {
    flex-grow: 1;
    font-size: 12px;
    color: #727780;
    display: flex;
    flex-flow: column;
    cursor: pointer;
    &:not(:last-of-type) {
      border-right: 1px solid #cccccc;
    }
  }
}
.f-a {
  font-size: 11px !important;
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 5px;
}
</style>